import React,{useState,useEffect} from 'react'
import './Aftersales.less'
import {SwapOutlined,FunnelPlotOutlined,SearchOutlined,ArrowUpOutlined,RedoOutlined,BugOutlined,ArrowDownOutlined,PushpinOutlined} from '@ant-design/icons'
import {Button,Radio,Select,Form, Table,Checkbox, Input,Pagination,Image,Tabs,message } from 'antd'
import { Link } from 'react-router-dom'
import http from '../../utils/http'
const {TabPane}=Tabs
const Aftersales=()=>{
    // 头部变量
    const [count, setCount] = useState(1);
    const [height, setHeight] = useState(true);
    const countChange = function (a) {
        setCount(a)
      }

      let close=()=>{
      setHeight(!height);
      }
      // 表头
    const columns = [
        {
          title: '售后订单编号',
          dataIndex: 'refundId',
          key: 'refundId',
          align:'center',
          className:'orderd'
        },
        {
        title: '退款类型',
        dataIndex: 'refundType',
        key: 'refundType',
        align:'center',
        className:'orderd',
        render:(record)=><div>{record==0 ?'直接换货':'退货退款'}</div>
          },
        {
          title: '买家id/名称',
          dataIndex: 'name',
          key: 'name',
          align:'center',
          className:'orderd'
        },
        {
            title: '订单详情',
            dataIndex: 'properties',
            key: 'properties',
            align:'center',
            ellipsis:true,
            className:'orderd'
        },
          {
            title: '申请时间',
            dataIndex: 'applyTime',
            key: 'applyTime',
            align:'center',
            className:'orderd'
          },
          {
            title: '实付金额',
            dataIndex: 'costs',
            key: 'costs',
            align:'center',
            className:'orderd'
          }, 
          {
            title: '订单状态',
            dataIndex: 'dealStatus',
            key: 'dealStatus',
            align:'center',
            className:'orderd',
            // -1已驳回，
            render:(text, record)=>
            <span>{record.dealStatus=='被驳回'?'待处理':record.dealStatus==1 ?'处理中':'已处理'}</span>
          },
          {
            title: '联系方式',
            dataIndex: 'contactWay',
            key: 'contactWay',
            align:'center',
            className:'orderd',
          },
          {
            title: '操作',
            dataIndex: 'action',
            key: 'action',
            align:'center',
            render: (text, record)=><div style={{display:'flex',justifyContent:'flex-start',alignItems:'center'}}>
                {record.dealStatus==0 ? <div> 
                    <Link to={"/home/Aftersales/AfterDat"}>
                    <Button type='primary' style={{backgroundColor:'rgb(23,28,78)',borderStyle:'none',marginRight:'5px'}} onClick={()=>(xiangqin(record))}>详情/编辑</Button> 
                    </Link>
                    <Button type='primary' style={{backgroundColor:'rgb(33,61,192)',borderStyle:'none',marginLeft:'5px'}} onClick={()=>(tongguo(record))}>通过</Button>
                    <Button type='primary' style={{backgroundColor:'rgb(245,108,108)',borderStyle:'none',marginLeft:'5px'}} onClick={()=>(jujue(record))}>拒绝</Button>
                    </div>:record.dealStatus==1 ? <div><Link to={"/home/Aftersales/AfterDat"}> <Button type='primary' style={{backgroundColor:'rgb(23,28,78)',borderStyle:'none',marginRight:'5px'}} onClick={()=>(xiangqin(record))}>详情/编辑</Button>
                    </Link> <Button type='primary' style={{backgroundColor:'rgb(33,61,192)',borderStyle:'none',marginLeft:'5px'}}>退货/换货</Button>
                    </div>:<div><Link to={"/home/Aftersales/AfterDat"}>
                        <Button type='primary' style={{backgroundColor:'rgb(23,28,78)',borderStyle:'none',marginRight:'5px'}} onClick={()=>(xiangqin(record))}>详情/编辑</Button>
                        </Link>
                    </div>}
            </div>
            
          },
      ];
    //   行操作
      const rowSelection = {
        onChange: (selectedRowKeys, selectedRows) => {
          setIds(selectedRows)
          setLength(selectedRowKeys.length)
        },
        onSelect: (record, selected, selectedRows) => {
          // console.log(record, selected, selectedRows);
        },
        onSelectAll: (selected, selectedRows, changeRows) => {
          // console.log(selected, selectedRows, changeRows);
        },
        onRow:(record, index)=>{

        }
      };
      //数据
      const [data,setData]=useState([])
      //退款类型
      const [tkType,settyType]=useState('')
      const tuikuan=(e)=>{
        settyType(e)
      }
      //选择时间
      const [start,setStart]=useState('')
      const chooseStart=(e)=>{
        setStart(e.target.value)
      }
      const [over,setOver]=useState('')
      const chooseOver=(e)=>{
        setOver(e.target.value)
      }
      //搜索框
      const [searchVal,setVal]=useState('')
      const sousuo=(e)=>{
        setVal(e.target.value)
      }
      //分页器
      const [xianshiyeshu,setXsys]=useState(4)
      const [dangqianye,setDqy]=useState(1)
      const qiehuanyema=(page,pageSize)=>{
        setDqy(page)
      }
      const [total,setTotal]=useState(0)
      //进入请求
       useEffect(() => {
          http({
            url:'api/adminRefund/findByCondition',
            method:'post',
            params:{
                page:dangqianye,
                size:xianshiyeshu
            }
            }).then(res=>{
              console.log(data);
              if (res.length==0) {
                console.log('暂无数据');
                
              }else{
                setData(res.data)
                setTotal(res.total)
              }
            })
          },[dangqianye])
          //搜索
        const search=()=>{
          http({
            url:'api/adminRefund/findByCondition',
            method:'post',
            params:{
              page:dangqianye,
              size:xianshiyeshu,
              refundType:tkType,
              from:start,
              to:over,
              oid:searchVal
            }
          }).then(res=>{
            setData(res.data)
            setTotal(res.total)
          })
        }
        //重置
        const regit=()=>{
          settyType('')
          setStart('')
          setOver('')
          setVal('')
          http({
            url:'api/adminRefund/findByCondition',
            method:'post',
            params:{
              page:dangqianye,
              size:xianshiyeshu,
            }
          }).then(res=>{
            setData(res.data)
            setTotal(res.total)
          })
        }
        // tab选项卡
        const callback=(key)=>{
          http({
            url:'api/adminRefund/findByCondition',
            method:'post',
            params:{
              page:dangqianye,
              size:xianshiyeshu,
              selectType:key 
            }
          }).then(res=>{
            setTotal(res.total)
            setData(res.data)
            console.log(dangqianye,xianshiyeshu,key);
          })
        }
        //行id值
        const [ids,setIds]=useState([]);
        //行选择条数
        const [rowLength,setLength]=useState(0)
        //单选
        const [radido, setValue] =useState(0)
        const gbian=(e)=>{
          setValue(e.target.value)
          }
          //执行导出操作
        const  Export=()=>{
          fetch('api/adminRefund/refundExport',{
            method:'post',
            headers:{
              'Content-Type': 'application/json'
            },
            body:JSON.stringify({
              choose:radido,
              data:ids
            })
          }).then(res => res.blob()).then(blob => {
            let a = document.createElement('a');
            let url = window.URL.createObjectURL(new Blob([blob], {type: "application/vnd.ms-excel" }));
            a.href = url;
            a.download = "售后数据";  //定义导出的文件名
            a.click();
            window.URL.revokeObjectURL(url);
          })
        }
        //详情
    const xiangqin=(record)=>{
      http({
        url:'api/adminRefund/refundDetail',
        method:'post',
        params:{
          refundId:record.refundId
        }
      }).then(res=>{
        console.log(record.refundId);
        console.log(res);
        sessionStorage.setItem('shangpingXQ',JSON.stringify(res.data))
      })
    }
    //拒绝
    const jujue=(record)=>{
      http({
        url:'api/adminRefund/refundRefuse',
        method:'post',
        params:{
          refundId:record.refundId,
          remarkInfo:'已发货'
        }
      }).then(res=>{
        message.success('操作成功！！');
        http({
          url:'apa/adminRefund/findByCondition',
          method:'post',
          params:{
              page:dangqianye,
              size:xianshiyeshu
          }
          }).then(res=>{
            setData(res.data)
            setTotal(res.total)
          })
      })
    }
    //通过
    const tongguo=(record)=>{
      http({
        url:'api/adminRefund/refundPass',
        method:'post',
        params:{
          refundId:record.refundId,
          remarkInfo:'同意'
        }
      }).then(res=>{
        message.success('操作成功！！');
        http({
          url:'api/adminRefund/findByCondition',
          method:'post',
          params:{
              page:dangqianye,
              size:xianshiyeshu
          }
          }).then(res=>{
            setData(res.data)
            setTotal(res.total)
          })
      })
    }
    const [tkToal,setTktoal]=useState(0)
    const [ljToal,setLjToal]=useState(0)
    //获取统计的右上角数据
    useEffect(()=>{
      http({
        url:'api/adminRefund/getRefundOrder',
        method:'post',
      }).then(res=>{
        setTktoal(res.todayRefundOrder)
        setLjToal(res.allRefundOrder)
      })
    })
    return (
        <div className="topnav">
        <div className="top" >
            {/* 李悦 */}
        <div className='handle' style={{height:height ? '100px' :'0px'}}>
          <div className='topleft' style={{marginLeft:'2%'}}>
           <div className="icons-list">
            <div className='form'>
              <PushpinOutlined className='icon'/>
              <span style={{marginLeft: '20px',fontWeight:'bold'}}>筛选</span>
              <span style={{marginLeft: '20px',fontWeight:'bold'}}>退款类型：</span>
                <Select style={{width:'150px'}}  placeholder="请选择退款类型" value={tkType} onChange={tuikuan}>
                    <Select.Option value="0">直接换货</Select.Option>
                    <Select.Option value="1">退货退款</Select.Option>
                </Select>
              <span style={{marginLeft: '20px',fontWeight:'bold'}}>申请时间：</span>
              <Input  style={{width: 100}}  placeholder="开始时间" value={start} onChange={chooseStart}/>至<Input  style={{width: 100}}  placeholder="结算时间" value={over} onChange={chooseOver}/>
            </div>
            <div className='form'>
              <SearchOutlined className='icon'/>
              <span style={{marginLeft: '20px',fontWeight:'bold'}}>搜索</span>
              <span style={{marginLeft: '20px',fontWeight:'bold'}}>精准搜索：</span>
              <Input  style={{width: 250}}  placeholder="请输入订单编号" value={searchVal} onChange={sousuo}/>
            </div>
          </div>
        </div>
        <div className='topright' style={{marginRight:'5%'}}>
          <div className='echarts'>
             <div style={{padding:'10px 0'}}>今日退款订单</div>
              <div style={{fontSize:'30px',fontWeight:'bold'}}>{tkToal}单</div>
          </div>
          <div className='echarts'>
             <div style={{padding:'10px 0'}}>累计退款订单</div>
              <div style={{fontSize:'30px',fontWeight:'bold'}}>{ljToal}单</div>
          </div>
        </div>
      </div>
        <div className='bottom' style={{padding:'5px 20px'}}>
          <Button
              type="primary"
              icon={height ? <ArrowUpOutlined style={{fontWeight:'bold',fontSize:'16px'}}/>:<ArrowDownOutlined  style={{fontWeight:'bold',fontSize:'16px'}}/>}
              style={{backgroundColor:'#171c49',fontSize:'12px',fontWeight:'bold'}}
              className='bottomBtn'
              onClick={close}
        >
            {height?"收起":"展开"}
          </Button>
          <Button type="primary" icon={<RedoOutlined style={{fontWeight:'bold',fontSize:'16px'}} />} style={{backgroundColor:'#ffc306',fontSize:'12px'}}  className='bottomBtn' onClick={regit}>
            重置
          </Button>
          <Button  style={{fontSize:'12px',fontWeight:'bold'}} type="primary" icon={<SearchOutlined  style={{fontWeight:'bold',fontSize:'16px'}}/>} onClick={search}>
            搜索
          </Button>
          <input type="text" placeholder='请输入商品名称' className='input' style={{display:height?'none':'inline'}}/>
        </div>
        </div>
        
        {/* 表格 */}
        <div className="Cbody">
            <Tabs defaultActiveKey="1" onChange={callback} type="line">
                <TabPane tab={"全部订单 " +    total}  key='3' >
                    <Table size='middle'
                        pagination={false}
                        columns={columns}
                        rowSelection={{ ...rowSelection}}
                        dataSource={data}
                        rowKey={record=>record.refundId}
                        onHeaderRow={function(columns, index){
                            columns[4].width='50px'
                        }}
                    />
                </TabPane>
                <TabPane tab= {"待处理 " + 1} key="0">
                    <Table size='middle'
                            pagination={false}
                            columns={columns}
                            rowKey={record=>record.refundId}
                            rowSelection={{ ...rowSelection}}
                            dataSource={data}
                        />
                </TabPane>
                <TabPane tab={"处理中 " + 1} key="1">
                    <Table size='middle'
                            pagination={false}
                            columns={columns}
                            rowKey={record=>record.refundId}
                            rowSelection={{ ...rowSelection}}
                            dataSource={data}
                        />
                </TabPane>
                <TabPane tab= {"已处理 " + 2} key="2">
                    <Table size='middle'
                            pagination={false}
                            columns={columns}
                            rowKey={record=>record.refundId}
                            rowSelection={{ ...rowSelection}}
                            dataSource={data}
                        />
                </TabPane>
            </Tabs>
        </div>
        {/* 底部 */}
        <div className="foot">
            <div className="foot1">
                {/* <div style={{width:'15%',display:'flex',justifyContent:'center',alignItems:'center',flexDirection: 'row'}}>
                        <BugOutlined style={{fontSize:'25px',marginRight:'5px'}}/>
                        <span style={{fontWeight:'bold'}}> 快捷操作</span>
                    </div> */}
                <div style={{width:'60%',fontWeight:'bold'}}>
                     <Radio.Group  onChange={gbian}  value={radido} >
                           <Radio  value={1} >今日入库</Radio>
                          <Radio value={2}>当前页面</Radio>
                          <Radio value={3}>筛选结果</Radio>
                          <Radio value={4}>所有订单</Radio>
                        </Radio.Group>
                </div>
                <div style={{width:'30%',fontSize:'16px',fontWeight:'bold'}}>已选中  {rowLength}  件，共 {total} 条数据</div>
            </div>
            <div className="foot2">
                <Button type="primary" size="large" style={{backgroundColor:'rgb(24,144,255)',borderStyle:'none',fontWeight:'bold'}} onClick={Export}>一键导出</Button>
                <Pagination  total={total} pageSize={xianshiyeshu} current={dangqianye} onChange={qiehuanyema}/>
            </div>
        </div>
    </div> 
    )
}
export default Aftersales;